<template>
  <div class="work-area-monitor">
    <div class="module-title">
      <div class="title-icon">🏗️</div>
      <div class="title-text">工作区域监控</div>
    </div>
    
    <div class="monitor-content">
      <!-- 24小时风险预警监控 -->
      <div class="risk-monitoring-section">
        <div class="section-title">24小时风险预警监控</div>
        
        <!-- 顶部指标卡片 -->
        <div class="risk-indicators">
          <div class="indicator-card high-risk">
            <div class="indicator-icon">🚨</div>
            <div class="indicator-info">
              <div class="indicator-value">{{ highRiskCount }}</div>
              <div class="indicator-label">高风险人数</div>
            </div>
            <div class="pulse-dot"></div>
          </div>
          
          <div class="indicator-card medium-risk">
            <div class="indicator-icon">⚠️</div>
            <div class="indicator-info">
              <div class="indicator-value">{{ mediumRiskCount }}</div>
              <div class="indicator-label">中风险人数</div>
            </div>
          </div>
          
          <div class="indicator-card on-duty">
            <div class="indicator-icon">👷</div>
            <div class="indicator-info">
              <div class="indicator-value">{{ onDutyCount }}</div>
              <div class="indicator-label">在岗总人数</div>
            </div>
          </div>
          
          <div class="indicator-card monitor-areas">
            <div class="indicator-icon">📍</div>
            <div class="indicator-info">
              <div class="indicator-value">{{ monitorAreas }}</div>
              <div class="indicator-label">监控区域数</div>
            </div>
          </div>
        </div>
        
        <!-- 主图表：24小时风险等级趋势 -->
        <div class="risk-trend-chart" ref="riskTrendChart"></div>
        
        <!-- 底部小卡片 -->
        <div class="risk-summary">
          <div class="summary-item peak-time">
            <div class="summary-label">最高风险时段</div>
            <div class="summary-value">{{ peakRiskTime }}</div>
          </div>
          
          <div class="summary-item response-time">
            <div class="summary-label">平均响应时间</div>
            <div class="summary-value">{{ avgResponseTime }}</div>
          </div>
          
          <div class="summary-item handle-rate">
            <div class="summary-label">本日预警处理率</div>
            <div class="summary-value">{{ handleRate }}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'WorkAreaMonitor',
  data() {
    return {
      riskTrendChart: null,
      timer: null,
      // 风险监控数据
      highRiskCount: 5,
      mediumRiskCount: 12,
      onDutyCount: 162,
      monitorAreas: 9,
      peakRiskTime: '14:00-16:00',
      avgResponseTime: '3.5分钟',
      handleRate: 92,
      riskTrendData: {
        times: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
        critical: [1, 0, 0, 1, 2, 3, 4, 6, 5, 3, 2, 1],
        warning: [2, 1, 1, 3, 5, 8, 10, 12, 11, 8, 5, 3],
        attention: [5, 4, 3, 6, 8, 12, 15, 18, 16, 12, 8, 6],
        normal: [154, 157, 158, 152, 147, 139, 133, 126, 130, 139, 147, 152]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initRiskTrendChart()
      this.startDataUpdate()
    })
    
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.riskTrendChart) {
      this.riskTrendChart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    // 初始化风险趋势图表
    initRiskTrendChart() {
      if (!this.$refs.riskTrendChart) return
      
      this.riskTrendChart = echarts.init(this.$refs.riskTrendChart)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#4fc3f7',
          borderWidth: 1,
          textStyle: {
            color: '#fff',
            fontSize: 11
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['严重', '一般', '需关注', '正常'],
          top: 0,
          right: 10,
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
          icon: 'roundRect',
          itemWidth: 12,
          itemHeight: 8,
          itemGap: 10
        },
        grid: {
          left: '8%',
          right: '5%',
          top: '18%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.riskTrendData.times,
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisLabel: {
            color: '#999',
            fontSize: 9,
            interval: 1,
            rotate: 0
          }
        },
        yAxis: {
          type: 'value',
          name: '人数',
          nameTextStyle: {
            color: '#999',
            fontSize: 10
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)'
            }
          },
          axisLabel: {
            color: '#999',
            fontSize: 9
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '严重',
            type: 'bar',
            stack: 'total',
            data: this.riskTrendData.critical,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff4757' },
                { offset: 1, color: '#ff6b6b' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: '#ff4757'
              }
            }
          },
          {
            name: '一般',
            type: 'bar',
            stack: 'total',
            data: this.riskTrendData.warning,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ffa502' },
                { offset: 1, color: '#ffa726' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: '#ffa502'
              }
            }
          },
          {
            name: '需关注',
            type: 'bar',
            stack: 'total',
            data: this.riskTrendData.attention,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ffd32a' },
                { offset: 1, color: '#ffe66d' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: '#ffd32a'
              }
            }
          },
          {
            name: '正常',
            type: 'bar',
            stack: 'total',
            data: this.riskTrendData.normal,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1dd1a1' },
                { offset: 1, color: '#48dbfb' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: '#1dd1a1'
              }
            }
          }
        ]
      }
      
      this.riskTrendChart.setOption(option)
    },
    
    // 开始数据更新
    startDataUpdate() {
      this.timer = setInterval(() => {
        this.updateStats()
      }, 8000)
    },
    
    // 更新统计数据
    updateStats() {
      const variations = [-1, 0, 1]
      
      // 更新风险监控数据
      this.highRiskCount = Math.max(0, Math.min(15, this.highRiskCount + variations[Math.floor(Math.random() * variations.length)]))
      this.mediumRiskCount = Math.max(0, Math.min(30, this.mediumRiskCount + variations[Math.floor(Math.random() * variations.length)]))
      this.handleRate = Math.max(85, Math.min(100, this.handleRate + variations[Math.floor(Math.random() * variations.length)]))
      
      // 更新风险趋势图表数据（模拟滚动更新）
      if (Math.random() < 0.3) {
        this.riskTrendData.critical.shift()
        this.riskTrendData.critical.push(Math.floor(Math.random() * 8))
        
        this.riskTrendData.warning.shift()
        this.riskTrendData.warning.push(Math.floor(Math.random() * 15) + 3)
        
        this.riskTrendData.attention.shift()
        this.riskTrendData.attention.push(Math.floor(Math.random() * 20) + 5)
        
        this.riskTrendData.normal.shift()
        this.riskTrendData.normal.push(Math.floor(Math.random() * 30) + 130)
        
        if (this.riskTrendChart) {
          this.riskTrendChart.setOption({
            series: [
              { data: this.riskTrendData.critical },
              { data: this.riskTrendData.warning },
              { data: this.riskTrendData.attention },
              { data: this.riskTrendData.normal }
            ]
          })
        }
      }
    },
    
    // 处理窗口大小变化
    handleResize() {
      if (this.riskTrendChart) {
        this.riskTrendChart.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.work-area-monitor {
  height: 100%;
  padding: 10px 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    
    .title-icon {
      font-size: 14px;
      margin-right: 5px;
    }
    
    .title-text {
      font-size: 14px;
      font-weight: bold;
      color: #4fc3f7;
      letter-spacing: 0.5px;
    }
  }
  
  .monitor-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  // 风险预警监控区域
  .risk-monitoring-section {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    
    .section-title {
      font-size: 12px;
      color: #4fc3f7;
      margin-bottom: 0;
      font-weight: 600;
      padding-left: 6px;
      border-left: 3px solid #4fc3f7;
      flex-shrink: 0;
    }
    
    // 顶部指标卡片
    .risk-indicators {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      flex-shrink: 0;
      
      .indicator-card {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 3px;
        }
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        &.high-risk {
          &::before {
            background: linear-gradient(to bottom, #ff4757, #ff6b6b);
          }
          
          .pulse-dot {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 6px;
            height: 6px;
            background: #ff4757;
            border-radius: 50%;
            animation: pulse-ring 2s infinite;
            
            &::after {
              content: '';
              position: absolute;
              top: -2px;
              left: -2px;
              right: -2px;
              bottom: -2px;
              border: 2px solid #ff4757;
              border-radius: 50%;
              animation: pulse-ring 2s infinite;
            }
          }
        }
        
        &.medium-risk::before {
          background: linear-gradient(to bottom, #ffa502, #ffa726);
        }
        
        &.on-duty::before {
          background: linear-gradient(to bottom, #4fc3f7, #29b6f6);
        }
        
        &.monitor-areas::before {
          background: linear-gradient(to bottom, #1dd1a1, #00d4aa);
        }
        
        .indicator-icon {
          font-size: 18px;
          flex-shrink: 0;
        }
        
        .indicator-info {
          flex: 1;
          min-width: 0;
          
          .indicator-value {
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            line-height: 1.2;
          }
          
          .indicator-label {
            font-size: 9px;
            color: #999;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    
    // 主图表
    .risk-trend-chart {
      flex: 1;
      min-height: 0;
      min-width: 0;
    }
    
    // 底部小卡片
    .risk-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      flex-shrink: 0;
      
      .summary-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 6px 8px;
        text-align: center;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(79, 195, 247, 0.4);
        }
        
        .summary-label {
          font-size: 9px;
          color: #999;
          margin-bottom: 3px;
        }
        
        .summary-value {
          font-size: 13px;
          font-weight: bold;
          color: #fff;
        }
        
        &.peak-time .summary-value {
          color: #ff6b6b;
        }
        
        &.response-time .summary-value {
          color: #4fc3f7;
        }
        
        &.handle-rate .summary-value {
          color: #00d4aa;
        }
      }
    }
  }
}

@keyframes pulse-ring {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
</style>
